<!-- 注册页面 -->
<style scoped>
/* 大div */
/* 大div */
.box {
    width: 100%;
    height: 100vh;
    /* 假设你想让背景图片占据整个视口的高度 */
    background-image: url("../assets/10001.jpg");
    background-size: cover;
    /* 这将确保背景图片覆盖整个元素，而不会被拉伸或压缩 */
    background-position: center;
    /* 这将确保背景图片在元素中居中显示 */
    background-repeat: no-repeat;
    /* 这将确保背景图片不会重复 */
}

/* 飞机图片 */
.aircraft {
    width: 240px;
    height: 150px;
    margin: 50px 30px;
}

/* 登良注册最大的div */
/* 登良注册最大的div */
.boxes {
    width: 80%;
    height: 360px;
    margin: 0 10%;
    background-color: rgba(255, 255, 255, 0.3);
    /* 白色半透明背景，透明度为0.5 */
    text-align: center;
    font-size: 14px;
}


.picture {
    margin-top: 10px;
}

/* 名称 */
.cell_name {
    width: 90%;
    height: 35px;
    margin-top: 6px;
    border: none;
    padding-left: 5px;
}

/* 手机号 */
.cell_phone_number {
    width: 90%;
    height: 35px;
    margin-top: 20px;
    border: none;
    padding-left: 5px;
}

/* 密码 */
.password {
    width: 90%;
    height: 35px;
    margin-top: 20px;
    border: none;
    padding-left: 5px;
}

.coding {
    width: 90%;
    height: 35px;
    margin-top: 20px;
    border: none;
    padding-left: 5px;
}

/* 性别 */
.sex {
    width: 90%;
    height: 35px;
    margin-top: 20px;
    margin-left: 5%;
    border: none;
    padding-left: 5px;
    display: flex;
    justify-content: space-between;
}

.sex_gender {
    width: 40%;
    display: flex;
    justify-content: space-around;
}

.Go_and_log_in {
    color: #2a82e4;
}

.button {
    width: 90%;
    height: 38px;
    background-color: #2a82e4;
    color: white;
    border: none;
    margin-top: 46px;
    border-radius: 15px;
}
</style>

<template>
    <div class="box">
        <img class="aircraft" src="../assets/feiji.png" alt="" />
        <div class="boxes">
            <van-uploader :after-read="afterRead" :max-count="1" class="picture" v-model="img" />
            <input type="text" v-model="nickname" class="cell_name" placeholder="输入昵称" />
            <input type="text" v-model="tel" class="cell_phone_number" placeholder="输入手机号" />
            <input type="password" v-model="password" class="password" placeholder="输入密码" />
            <input type="number" class="coding" placeholder="输入编号" />
            <div class="sex">
                <div class="sex_gender">
                    <label>
                        <input type="radio" id="male" v-model="sex" name="gender" value="1" />
                        <span>男</span>
                        <!-- 添加了name和value属性 -->
                    </label>

                    <label>
                        <input type="radio" id="female" v-model="sex" name="gender" value="2" />
                        <span>女</span>
                        <!-- 添加了name和value属性 -->
                    </label>
                </div>

                <div @click="GO_log_in" class="Go_and_log_in">前往登录</div>
            </div>
            <button class="button" @click="Register">注册</button>

        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch, reactive } from "vue";
import axios from "axios";
import {registerStore} from "../api/enroll"
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
const router = useRouter();
const route = useRoute();
// 头像
const head_portrait =
    'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg'
// 图片上传
const fileList = ref(
    // { url:'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg'},
);
const tel = ref("");
const password = ref("");
const nickname = ref("");
const sex = ref('');
const img = ref([])
// 去登录页面
function GO_log_in() {
    router.push({
        name: "login",
    });
}

const afterRead = (file) => {
    let img = file.file;
    const form = new FormData();
    form.append("file", img, img.name);
    console.log(file, 123456);
    axios({
        url: "https://wwz.jingyi.icu/app/File/file",
        method: "post",
        data: form,
        id:23
    })
        .then((arr) => {
            console.log(arr);
            fileList.value = arr.front_file;
            console.log(fileList.value);
        })
        .catch((err) => {
            console.log(err);
        });
};

// 验证手机号是否是11位有效手机号
const isValidPhone = computed(() => /^1[3-9]\d{9}$/.test(tel.value.trim()));
// 注册
function Register() {
  if (!isValidPhone.value) {
    showFailToast("手机号格式不正确");
  }
  // 手机号未输入提示
  if (tel.value == "") {
    showFailToast("请输入手机号");
  }
  // 密码未输入提示
  if (password.value == "") {
    showFailToast("请输入密码");
  }
  // 手机号和密码未输入提示
  if (tel.value == "" && password.value == "") {
    showFailToast("请输入手机号和密码");
  }
  // 头像未上传提示
  if (fileList.value == "") {
    showFailToast("请上传头像");
  }
  if (
    fileList.value != "" &&
    nickname.value != "" &&
    tel.value != "" && 
    password.value != "" &&
    sex.value != "" &&
    isValidPhone.value
  ) {
    registerStore({
        img: fileList.value,
        tel: tel.value,
        pass: password.value,
        sex: sex.value,
        nickname: nickname.value,
      })
      .then((res) => {
        console.log(res);
        if (res.data.code == 1) {
          showSuccessToast("注册成功");
          setTimeout(() => {
            router.replace({
              path: "/login",
            });
          }, 3000);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
</script>